<template>
  <div class="secondhand-contact-page">
    <!-- 学校信息卡片 -->
    <div class="info-card">
      <div class="card-header">
        <van-icon name="shop-o" size="20" color="#8b4513" />
        <h3>淘书巴士服务中心</h3>
      </div>
      <van-cell-group>
        <van-cell title="联系电话" icon="phone-o" value="0575-881222000" />
        <van-cell title="电子邮箱" icon="envelop-o" value="contact@oldbooks.com" />
        <van-cell title="平台地址" icon="location-o" value="浙江省宁波市江北区风华路495号" />
        <van-cell title="工作时间" icon="clock-o" value="周一至周五 8:00-17:00" />
      </van-cell-group>
    </div>

    <!-- 联系信息表单 -->
    <div class="contact-form">
      <div class="form-header">
        <van-icon name="edit" size="18" color="#8b4513" />
        <h3>填写反馈信息</h3>
      </div>
      
      <van-form @submit="addContact">
        <van-field
          v-model="newContact.name"
          name="name"
          label="姓名"
          placeholder="请输入您的姓名"
          left-icon="user-o"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        
        <van-field
          v-model="newContact.phone"
          name="phone"
          label="联系电话"
          placeholder="请输入您的手机号码"
          left-icon="phone-o"
          :rules="[
            { required: true, message: '请填写联系电话' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
          ]"
        />
        
        <van-field
          v-model="newContact.content"
          name="content"
          label="反馈内容"
          placeholder="请输入您的反馈或建议"
          type="textarea"
          rows="4"
          left-icon="comment-o"
          :rules="[{ required: true, message: '请填写反馈内容' }]"
        />
        
        <div style="margin: 16px;">
          <van-button round block type="primary" color="#8b4513" native-type="submit">
            提交反馈
          </van-button>
        </div>
      </van-form>
    </div>
    
    <!-- 历史反馈记录 -->
    <div class="history-messages" v-if="contactHistory.length > 0">
      <div class="history-header">
        <van-icon name="history" size="18" color="#8b4513" />
        <h3>历史反馈记录</h3>
      </div>
      
      <div 
        class="history-item" 
        v-for="(item, index) in contactHistory" 
        :key="index"
      >
        <div class="history-content">{{ item.content }}</div>
        <div class="history-time">{{ item.time }}</div>
        <div class="history-status" :class="item.status">
          {{ item.status === 'pending' ? '处理中' : '已回复' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant';

export default {
  data() {
    return {
      newContact: {
        name: '',
        phone: '',
        content: ''
      },
      contactHistory: [
        {
          content: '希望增加更多计算机类二手书',
          time: '2024-05-10 14:30',
          status: 'replied'
        },
        {
          content: '购买的书籍有缺页，希望处理',
          time: '2024-05-15 09:15',
          status: 'pending'
        }
      ]
    };
  },
  methods: {
    addContact() {
      // 模拟提交反馈
      const newRecord = {
        content: this.newContact.content,
        time: new Date().toLocaleString(),
        status: 'pending'
      };
      
      this.contactHistory.unshift(newRecord);
      
      // 重置表单
      this.newContact = {
        name: '',
        phone: '',
        content: ''
      };
      
      showToast('反馈提交成功，我们会尽快处理');
    }
  }
};
</script>

<style lang="less" scoped>
// 页面样式
.secondhand-contact-page {
  background-color: #f9f5ed;
  min-height: 100vh;
  padding-bottom: 20px;
	padding-top: 50px;
}

.info-card {
  background-color: white;
  margin: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  
  h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    margin-left: 10px;
  }
}

.contact-form {
  background-color: white;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    margin-left: 10px;
  }
}

.history-messages {
  background-color: white;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.history-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  
  h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    margin-left: 10px;
  }
}

.history-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.history-content {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.history-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.history-status {
  font-size: 12px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
}

.pending {
  background-color: #fff0f0;
  color: #f56c6c;
}

.replied {
  background-color: #f0fff4;
  color: #52c41a;
}
</style>